<template>
    <div>
        <div class="right">
            <div class="laohuangli cell">
                <h3 class="title" style="margin-bottom: 0px;">
                    <p class="line">今日老黄历</p>
                </h3>
                <div class="content">
                    <a>
                        <el-date-picker v-model="currentDate" type="date" @change="getLhl" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" placeholder="选择日期查询黄历">
                        </el-date-picker>
                        <div class="date" style="margin-top: 10px;">
                            <p>{{ lhl.yangli }} {{ lhl.xingqi }}</p>
                            <p>{{ lhl.yinli }}</p>
                        </div>
                        <div class="yi yjc">
                            <p class="left"><i class="yi-icon"></i></p>
                            <p class="right">
                                {{ lhl.yi }}
                            </p>
                        </div>
                        <div class="ji yjc">
                            <p class="left"><i class="ji-icon"></i></p>
                            <p class="right">
                                {{ lhl.ji }}
                            </p>
                        </div>
                        <div class="chong yjc">
                            <p class="left"><i class="chong-icon"></i></p>
                            <p class="right">{{ lhl.chongsha }}</p>
                        </div>
                        <div class="chong yjc" style="display: flex;align-items: center;">
                            <p class="left" style="color: #6f700f;font-weight: 800;min-width: 50px;font-size: 15px;">纳音：
                            </p>
                            <p class="right">{{ lhl.wuxing }}</p>
                        </div>
                        <div class="chong yjc" style="display: flex;align-items: center;">
                            <p class="left" style="color: #6f700f;font-weight: 800;min-width: 50px;font-size: 15px;">百忌：
                            </p>
                            <p class="right">{{ lhl.baiji }}</p>
                        </div>
                        <div class="chong yjc" style="display: flex;align-items: center;">
                            <p class="left" style="color: #6f700f;font-weight: 800;min-width: 50px;font-size: 15px;">星宿：
                            </p>
                            <p class="right">{{ lhl.xingxiu }}</p>
                        </div>
                        <div class="chong yjc" style="display: flex;align-items: center;">
                            <p class="left" style="color: #6f700f;font-weight: 800;min-width: 50px;font-size: 15px;">贵神：
                            </p>
                            <p class="right">{{ lhl.guishenfangwei }}</p>
                        </div>
                        <div class="chong yjc" style="display: flex;align-items: center;">
                            <p class="left" style="color: #6f700f;font-weight: 800;min-width: 50px;font-size: 15px;">喜神：
                            </p>
                            <p class="right">{{ lhl.xishenfangwei }}</p>
                        </div>
                        <div class="chong yjc" style="display: flex;align-items: center;">
                            <p class="left" style="color: #6f700f;font-weight: 800;min-width: 50px;font-size: 15px;">福神：
                            </p>
                            <p class="right">{{ lhl.fushenfangwei }}</p>
                        </div>
                        <div class="chong yjc" style="display: flex;align-items: center;">
                            <p class="left" style="color: #6f700f;font-weight: 800;min-width: 50px;font-size: 15px;">财神：
                            </p>
                            <p class="right">{{ lhl.caishenfangwei }}</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="qiming cell">
                <h3 class="title">
                    <p class="line">起名&取名</p>
                </h3>
                <ul class="col-2">
                    <li><a href="#" target="_blank">免费起名</a></li>
                    <li><a href="#" target="_blank">起名字典</a></li>
                    <li><a href="#" target="_blank">男孩起名</a></li>
                    <li><a href="#" target="_blank">女孩起名</a></li>
                    <li><a href="#" target="_blank">八字起名</a></li>
                    <li><a href="#" target="_blank">周易起名</a></li>
                    <li><a href="#" target="_blank">公司起名</a></li>
                    <li><a href="#" target="_blank">姓名配对</a></li>
                    <li><a href="#" target="_blank">姓名打分</a></li>
                    <li><a href="#" target="_blank">五行缺什么</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentDate: "",
            apiUrl: window.config.apiUrl,
            lhl: {
                yi: "",
                ji: "",
                chong: "",
                yinli: "",
                xingqi: "",
                chongsha: ""
            }
        };
    },
    mounted() {
        this.getCurrentDate();
    },
    methods: {
        getCurrentDate() {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
            const day = String(today.getDate()).padStart(2, '0');
            this.currentDate = `${year}-${month}-${day}`;
            this.getLhl();
        },
        getLhl() {
            let params = {
                'title_laohuangli': this.currentDate,
                'api_key': 'FNcQHQuf0W8wDrXMjWc0xqTzw'

            }
            console.log(params)
            let config = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }

            this.$axios.post(window.config.apiUrl + '/v1/Gongju/laohuangli', params, config).then(res => {
                console.log(res.data.data)
                this.lhl = res.data.data;
            })
        },
    }
}
</script>

<style></style>